<template>
    <div>
        <Row>
            <Col class="inn-time">使用萝卜猎手第<span>233</span>天</Col>
        </Row>
        <Row type="flex" justify="start">
            <Col class="card-min">
                <span class="card-title">账户余额</span>
                <div @mouseover="mouseover(1)" @mouseout="mouseout(1)" class="action">
                    <Icon type="more" size="24" color="#D3D3D3" class="card-action" v-if="!oHoverOne"></Icon>
                    <span class="card-action-hover" v-if="oHoverOne">充值</span>
                </div>
                <p class="card-val">￥0.00</p>
            </Col>
            <Col class="card-min offset">
                <span class="card-title">当月消费</span>
                <div @mouseover="mouseover(2)" @mouseout="mouseout(2)" class="action">
                    <Icon type="more" size="24" color="#D3D3D3" class="card-action" v-if="!oHoverTwo"></Icon>
                    <span class="card-action-hover" v-if="oHoverTwo">明细</span>
                </div>
                <p class="card-val">￥0.00</p>
            </Col>
            <Col class="card-min offset">
                <span class="card-title">存档空间</span>
                <div @mouseover="mouseover(3)" @mouseout="mouseout(3)" class="action">
                    <Icon type="more" size="24" color="#D3D3D3" class="card-action" v-if="!oHoverThree"></Icon>
                    <span class="card-action-hover" v-if="oHoverThree">扩充</span>
                </div>
                <p class="card-val">-/-</p>
            </Col>
        </Row>
        <!--萝卜职说-->
        <Row type="flex" justify="space-between" class="inn-title">
            <Col class="inn-title-left">
                <img src="../../assets/img/work-space/inn-title-1.png" alt="">
                <span>萝卜职说</span>
            </Col>
            <Col>
                <div class="inn-btn-1 cursor"></div>
            </Col>
        </Row>
        <Row type="flex" justify="start">
            <Col class="card-big">
                <img src="../../assets/img/work-space/card-big-1.png" alt="">
                <div>
                    <span>全部员工</span>
                    <p>0人</p>
                </div>
            </Col>
            <Col class="card-big offset">
                <img src="../../assets/img/work-space/card-big-2.png" alt="">
                <div>
                    <span>已评员工</span>
                    <p>0人</p>
                </div>
            </Col>
            <Col class="card-big offset">
                <img src="../../assets/img/work-space/card-big-3.png" alt="">
                <div>
                    <span>离职待评</span>
                    <p>0人</p>
                </div>
            </Col>
            <Col class="card-big offset">
                <img src="../../assets/img/work-space/card-big-4.png" alt="">
                <div>
                    <span>待处理</span>
                    <p>0人</p>
                </div>
            </Col>
        </Row>
        <!--背景调查-->
        <Row type="flex" justify="space-between" class="inn-title">
            <Col class="inn-title-left">
            <img src="../../assets/img/work-space/inn-title-2.png" alt="">
            <span>萝卜职说</span>
            </Col>
            <Col>
            <div class="inn-btn-2 cursor"></div>
            </Col>
        </Row>
        <Row type="flex" justify="start" class="card-bottom">
            <Col class="card-big">
            <img src="../../assets/img/work-space/card-big-5.png" alt="">
            <div>
                <span>报告中心</span>
                <p>0份</p>
            </div>
            </Col>
            <Col class="card-big offset">
            <img src="../../assets/img/work-space/card-big-6.png" alt="">
            <div>
                <span>未读报告</span>
                <p>0份</p>
            </div>
            </Col>
            <Col class="card-big offset">
            <img src="../../assets/img/work-space/card-big-7.png" alt="">
            <div>
                <span>待处理</span>
                <p>0份</p>
            </div>
            </Col>
            <Col class="card-big offset">
            <img src="../../assets/img/work-space/card-big-8.png" alt="">
            <div>
                <span>问题报告</span>
                <p>0份</p>
            </div>
            </Col>
        </Row>

    </div>

</template>

<script>
    export default {
        name: 'workspace',
        data () {
            return {
                oHoverOne:false,
                oHoverTwo:false,
                oHoverThree:false
            }
        },
        methods:{
            mouseover(index){
                if(index == 1){
                    this.oHoverOne = true;
                }else if(index == 2) {
                    this.oHoverTwo = true;
                }else {
                    this.oHoverThree = true;
                }
            },
            mouseout(index){
                if(index == 1){
                    this.oHoverOne = false;
                }else if(index == 2) {
                    this.oHoverTwo = false;
                }else {
                    this.oHoverThree = false;
                }
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .offset{
        margin-left: 20px;
    }
    .inn-time{
        font-size: 22px;
        color: #303A46;
        margin: 10px 0 30px 0;
    }
    .inn-time span{
        font-size: 22px;
        color: #FF6318;
        letter-spacing: 0;
    }
    .card-min{
        width: 230px;
        height:100px;
        padding: 25px;
        background: #FFFFFF;
        box-shadow: 0 3px 10px 2px rgba(162,181,199,0.15);
        border-radius: 2px;
    }
    .card-min:hover{
        cursor:pointer;
        background: #FFFFFF;
        box-shadow: 0 5px 16px 9px rgba(162,181,199,0.30);
        border-radius: 4px;
    }
    .card-min .card-title{
        font-size: 14px;
        color: #323C47;
        letter-spacing: 0;
        line-height: 14px;
        padding: 1px 5px 1px 5px;
    }
    .card-min .action{
        float: right;
        width:20%;
        height:20px;
    }
    .card-min .card-action{
        float: right;
        margin-top: -2px;
        margin-right:10px;
    }
    .card-min .card-action-hover{
        float: right;
        background: #FF8448;
        border-radius: 55px;
        font-size: 12px;
        color: #FFFFFF;
        padding: 0px 5px 1px 5px;
        margin-top: -2px;
    }
    .card-min .card-action-hover:hover{
        cursor:pointer;
    }
    .card-min .card-val{
        height:20px;
        font-size: 20px;
        color: #0093FF;
        line-height: 20px;
        margin-top: 15px;
    }

    .inn-title{
        width:1148px;
        height: 32px;
        margin-top: 50px;
        line-height: 32px;
        margin-bottom: 15px;
    }
    .inn-title .inn-title-left img{
        margin-top: 6px;
        float: left;
    }
    .inn-title .inn-title-left span{
        font-size: 18px;
        color: #49525D;
        float: left;
        margin-left: 10px;
    }


    .card-big{
        width: 272px;
        height:150px;
        background: #FFFFFF;
        box-shadow: 0 3px 10px 2px rgba(162,181,199,0.15);
        border-radius: 4px;
        padding: 45px;
    }
    .card-big:hover{
        cursor:pointer;
        background: #FFFFFF;
        box-shadow: 0 5px 16px 9px rgba(162,181,199,0.30);
        border-radius: 4px;
    }
    .card-big img{
        float: left;
    }
    .card-big div{
        float: left;
        margin-left: 32px;
    }
    .card-big div span{
        font-size: 14px;
        color: #323C47;
        line-height: 16px;
        display: block;
        margin-top: 6px;
    }
    .card-big div p{
        font-family: ArialMT;
        font-size: 22px;
        color: #FF6742;
        letter-spacing: 0;
        line-height: 16px;
        margin-top: 14px;
    }

    .inn-btn-1{
        width: 122px;
        height: 52px;
        background-image: url("../../assets/img/work-space/inn-btn-1.png");
        background-repeat: no-repeat;
        background-position: 10px -4px;
    }
    .inn-btn-1:hover{
        width: 122px;
        height: 52px;
        background-image: url("../../assets/img/work-space/inn-btn-2.png");
        background-repeat: no-repeat;
        background-position: 10px -4px;
    }
    .inn-btn-2{
        width: 122px;
        height: 52px;
        background-image: url("../../assets/img/work-space/inn-btn-3.png");
        background-repeat: no-repeat;
        background-position: 10px -4px;
    }
    .inn-btn-2:hover{
        width: 122px;
        height: 52px;
        background-image: url("../../assets/img/work-space/inn-btn-4.png");
        background-repeat: no-repeat;
        background-position: 10px -4px;
    }
    .card-bottom{
        margin-bottom: 50px;
    }
    .cursor:hover{
        cursor:pointer;
    }
</style>
